<template>
  <div style="display: inline-block;position: relative;">
    <div class="ht-select" :class="{ 'is-disabled': disabled }" :disabled="disabled" :readonly="!isSearch"
         @focus="inputFocus" @click="isoption" @blur="inputBlur">
      <input :disabled="disabled" :class="{ 'is-disabled': disabled }" v-model="searchValue"
             :placeholder="placeholder" type="text" class="ht-select-input"/>
      <div v-if="!isSearch" class="ht-select-icon">
        <img src="~/assets/images/about/job/job-select-drop.png" alt="">
      </div>
    </div>
    <div v-if="option" class="ht-option">
      <div v-for="(item,index) in list" @click="select(item)" class="ht-option-item">
        <span v-if="searchValue == item.label" style="font-weight: 600;color: #324A5D;">{{ item.label }}</span>
        <span v-else>{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang=ts>
const props = defineProps({
  value: {
    type: [Number, String],
    required: true
  },
  list: {
    type: Array,
    default: () => ([])
  },
  placeholder: {
    type: String
  },
  isSearch: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})
const showSelect = ref(false)
const searchValue = ref('')
const option = ref(false)
const disabled = ref(false)
const emit = defineEmits()
watch(() => searchValue, (newVal, oldValue) => {
  emit("searchChange", newVal)
}, {deep: true})
watch(() => props.value, (newVal, oldValue) => {
  let item = props.list.find((it) => it?.value == newVal)
  if (item) searchValue.value = item?.label
}, {deep: true})


onMounted(() => {
  document.addEventListener('click', (e) => {
    if (e?.target?.className !== 'ht-select') {
      option.value = false
    }
  })
})

const inputFocus = () => {
  showSelect.value = true
}
const inputBlur = () => {
  setTimeout(() => {
    showSelect.value = false
  }, 100)
}
const select = (item: { label: string; value: any; }) => {
  searchValue.value = item.label
  emit("update:value", item.value)
  emit('change',item.value)
  option.value = false
}
const isoption = () => {
  if (disabled.value !== true) {
    option.value = !option.value
  }
}
</script>
<style scoped>
.ht-select {
  width: 4.5rem;
  height: 0.75rem;
  border-radius: 0.1rem;
  border: 0.01rem solid #E0EEFF;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  color: #324A5D;
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.ht-select-input {
  width: 2.625rem;
  padding: 0.22rem 0.5rem;
  outline: none;
  border: 0;
  border-radius: 0.1rem;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  box-sizing: border-box;
  color: #111;
  display: inline-block;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  pointer-events: none;
  font-size: 0.2rem;
  overflow: hidden;
}

.ht-select:hover,
.ht-select:focus {
  border: 1px solid #C0C4CC;
}

.ht-select-input.is-disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
}

.ht-select.is-disabled {
  background-color: #FAFAFA;
  cursor: not-allowed;
}

.ht-option {
  background-color: #FFF;
  border-radius: 10px;
  font-size: 13px;
  overflow: hidden;
  padding: 0.1rem 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 5px;
  z-index: 2016;
  position: absolute;
  width: 100%;
}

.ht-option.active {
  background-color: #5B6E7D;
}

.ht-option-item {
  padding: 0px 20px;
  height: 34px;
  line-height: 34px;
  cursor: pointer;
  font-size: 0.2rem;
}

.ht-option-item:hover {
  background-color: #F5F7FA;
}

.ht-select-icon {
  float: right;
  color: #C0C4CC;
  font-size: 16px;
  transition: transform .3s;
  cursor: pointer;
  line-height: 0.55rem;
  text-align: center;
  pointer-events: none;
  margin-right: 0.5rem;

  img {
    width: 0.21rem;
    height: 0.1rem;
  }
}
</style>
